@import "bourbon/bourbon";
@import "variables";
@import "../app/assets/stylesheets/neat";

header {
  @include grid-column-gradient(gradient-stops($grid-columns));

  div.header-content {
    @include outer-container;

    div.logo {
      @include span-columns(6);
      padding: 4rem 0;
      text-align: left;
    }

    nav.buttons {
      @include span-columns(6);
      padding-top: 6rem;
      padding-bottom: 0;

      a.button {
        @include span-columns(3 of 6);
        margin-left: 0;

        @include media(min-width 54em) {
          @include span-columns(2 of 6);
        }
      }
    }
  }
}

section.code {
  padding: 2%;

  div.highlight {
    pre {
      font-size: 1em;
    }
  }
}

section.instructions {
  section {
    @include outer-container;

    aside {
      @include span-columns(3);
    }

    article {
      @include span-columns(9);
      border-left: 1px solid #eee;
    }
  }
}
